<template>
  <div>
    <el-row>
      <el-col :span="22">
        <!--查询按钮区域-->
        <el-form :inline="true" ref="queryForm" :model="queryMap" class="demo-form-inline">
          <el-form-item label="订餐类型" prop="type">
            <el-select v-model="queryMap.type" placeholder="订餐类型" :style="style" clearable filterable>
              <el-option v-for="type in typeList" :label="type.title" :style="style" :value="type.value" :key="type.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订餐状态" prop="statu">
            <el-select v-model="queryMap.statu" placeholder="订餐状态" :style="style" clearable filterable>
              <el-option v-for="statu in statuList" :label="statu.title" :style="style" :value="statu.value" :key="statu.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button type="reset" @click="resetForm">重置</el-button>
            <el-button type="primary" @click="fold">
              <div v-if="!isFold">
                展开
                <i class="el-icon-arrow-down"></i>
              </div>
              <div v-else>
                收起
                <i class="el-icon-arrow-up"></i>
              </div>
            </el-button>
          </el-form-item>
          <div v-if="isFold">
            <el-form-item label="申请人" prop="ename" style="margin-left: 14px">
              <el-input v-model="queryMap.ename" placeholder="申请人" :style="style"></el-input>
            </el-form-item>
            <el-form-item v-if="!isManager" label="部门名称" prop="deptno">
              <el-select v-model="queryMap.deptno" placeholder="部门名称" clearable filterable>
                <el-option v-for="dept in deptList" :label="dept.dname" :style="style" :value="dept.deptno" :key="dept.deptno"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </el-col>
      <el-col :span="1">
        <!--增删改按钮-->
        <el-button-group>
          <el-button type="primary" icon="el-icon-delete" @click="deleteData(key)">删除</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <!--订单信息表格-->
    <el-table
      :data="dataList"
      border
      stripe
      row-key="orderno"
      :expand-row-keys="expands"
      :height="height"
      style="width: 100%"
      @selection-change="selectChange"
      @expand-change="expandSelect"
      :row-class-name="tableRowClassName"
    >
      <!--展开详细内容-->
      <el-table-column type="expand">
        <template slot-scope="props">
          <p v-loading="props.row.loading" style="width: 95%; margin-left: 5%; color: rgba(64,158,255,0.7); font-weight: bold; font-size: 16px;">
            订餐人员名单：{{empLists[props.row.orderno] && empLists[props.row.orderno].join('，')}}
          </p>
          <el-table
            v-loading="props.row.loading"
            :data="mealLists[props.row.orderno]"
            border
            stripe
            style="width: 95%; margin-left: 4%"
            :row-class-name="tableRowClassName"
            header-row-class-name="mealTableHeader"
          >
            <!--序号列-->
            <el-table-column
              type="index"
              align="center"
              label="序号"
              width="105"
              :index="indexMethod">
            </el-table-column>
            <el-table-column
              prop="mealno"
              align="center"
              label="餐品编号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="mname"
              align="center"
              label="餐品名称"
              width="280">
            </el-table-column>
            <el-table-column
              prop="count"
              align="center"
              label="数量"
              width="152">
            </el-table-column>
            <el-table-column
              prop="price"
              align="center"
              label="单价"
              width="153">
            </el-table-column>
            <el-table-column
              prop="prices"
              align="center"
              label="价格"
              width="151">
            </el-table-column>
            <el-table-column
              prop="remark"
              align="center"
              label="备注"
              min-width="180">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <!--序号列-->
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="50"
        :index="indexMethod">
      </el-table-column>
      <!--全选框-->
      <el-table-column
        type="selection"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="orderno"
        align="center"
        label="编号"
        width="70">
      </el-table-column>
      <el-table-column
        prop="empno"
        align="center"
        label="申请人编号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="ename"
        align="center"
        label="申请人"
        width="130">
      </el-table-column>
      <el-table-column
        prop="dname"
        align="center"
        label="部门"
        width="140">
      </el-table-column>
      <el-table-column
        prop="num"
        align="center"
        label="订餐数量"
        width="100">
      </el-table-column>
      <el-table-column
        prop="price"
        align="center"
        label="总金额"
        width="100">
      </el-table-column>
      <el-table-column
        prop="type"
        align="center"
        label="订餐类型"
        width="100">
      </el-table-column>
      <el-table-column
        prop="time"
        align="center"
        label="创建时间">
      </el-table-column>
      <el-table-column
        align="center"
        label="状态"
        width="100">
        <template slot-scope="scope">
          <el-tag
            :type="getStatuType(scope.row.statu)"
            disable-transitions>{{scope.row.statu}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="130">
        <template slot-scope="scope">
          <el-button class="el-button--primary" @click="commitOrder(scope.$index, scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
      background
      class="pagination"
      layout="prev, pager, next, sizes, total"
      :total="total"
      :page-size="queryMap.limit"
      :current-page="queryMap.page"
      :page-sizes="limits"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
  </div>
</template>

<script>
    import tableMixin from '@/mixins/tableMixin'

    export default {
        name: "OrderCommit",
        mixins: [tableMixin],
        data() {
            return {
                //后台接口路径
                url: {
                    getDataList: 'getOrderPyPage',
                    getOne: 'getOrderByOrderno',
                    delBatch: 'delOrder',
                    orderCommit: 'editOrderStatu'
                },
                //部门列表
                deptList: [],
                //主键
                key: 'orderno',
                isFold: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                dateTime: '',
                newHeight: '475px',
                style: {
                    width: "220px"
                },
                openOrdernoList: [],
                mealLists: {},
                empLists: {},
                //展开行数组
                expands: [],
                //是否为部门经理
                isManager: false,
                isOrderList: true
            }
        },
        methods: {
            fold() {
                this.isFold = !this.isFold
                let temp = this.height
                this.height = this.newHeight
                this.newHeight = temp
            },
            expandSelect(data) {
                const orderno = data.orderno

                const index = this.expands.indexOf(orderno)
                if (index >= 0) {
                    this.expands.splice(index, 1)
                }

                if (!this.openOrdernoList.includes(orderno)) {
                    this.openOrdernoList.push(orderno)

                    this.$set(data, "loading", true)
                    this.empLists[orderno] =  []
                    this.$http.get("getAllOrderEmp", {
                        params: {
                            orderno
                        }
                    }).then(res => {
                        this.empLists[orderno] =  res.data.map(item => item.ename)

                        this.mealLists[orderno] =  null
                        this.$http.get("getAllOrderMeal", {
                            params: {
                                orderno
                            }
                        }).then(res => {
                            if (!this.expands.includes(orderno)) {
                                this.expands.push(orderno)
                            }
                            this.mealLists[orderno] =  Object.values(res.data)
                            this.$set(data, "loading", false)
                        })
                    })
                }
            },
            getStatuType(statu) {
                switch (statu) {
                    case "未提交":
                        return ""
                    case "待部门确认":
                        return "info"
                    case "待系统确认":
                        return "warning"
                    case "完成":
                        return "success"
                    case "已取消":
                        return "danger"
                }
                return ""
            },
            /**
             * 获取全部部门信息
             */
            getDeptList() {
                this.$http.get("getAllDept").then(res => {
                    this.deptList = res.data
                })
            },
            /**
             * 审核订单
             */
            commitOrder(index, data) {
                const statu = this.isManager ? 3 : 4
                const param = {
                    orderno: data.orderno,
                    statu
                }
                this.$confirm('确认审核通过该订单吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //调用后台
                    this.$http.post(this.url.orderCommit, param).then(res => {
                        this.$message.success("审核成功")
                        this.getDataList()
                    }).catch(() => {
                        this.$message.error("服务器错误")
                    })
                }).catch(() => {
                    this.$message.info("取消审核")
                })
            },
            openOrder(orderno) {
                this.$http.get("getOrderByOrderno", {
                    params: {
                        orderno
                    }
                }).then(res => {
                    const data = res.data
                    this.expandSelect(data)
                }).catch(() => {
                    this.$message.error("服务器错误")
                })
            },
            /**
             * 重写方法：获取表格数据
             */
            getDataList() {
                this.$http.post(this.url.getDataList, this.queryMap).then(res => {
                    if (res.data) {
                        this.dataList = res.data.data
                        this.total = res.data.count

                        const orderno = sessionStorage.getItem("orderno")
                        if (orderno > 0) {
                            this.openOrder(orderno)
                        }
                        sessionStorage.setItem("orderno", null)
                    }
                }).catch((res) => {
                    console.log(res)
                    this.$message.error("无法获取表格信息，服务器错误")
                })
            }
        },
        watch: {
            dateTime(val) {
                if (val) {
                    this.queryMap.start = val[0]
                    this.queryMap.end = val[1]
                }
            }
        },
        created() {
            //查询当天的订单
            this.queryMap.start = new Date(new Date().setHours(0, 0, 0, 0)); //获取当天零点的时间
            this.queryMap.end = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1); //获取当天23:59:59的时间

            //权限控制
            const permission = this.$store.state.permission
            if (permission === 2) {
                this.isManager = true
                this.queryMap.deptno = sessionStorage.getItem("deptno")
                this.queryMap.statu = 2
                this.getDataList()
            } else {
                this.queryMap.statu = 3
                this.getDataList()
            }

            //获取全部部门信息
            this.getDeptList()
            //获取订餐类型信息
            this.typeList = Object.values(this.$store.state.dict["type"]).map((item, index) => ({value: index + 1, title: item.text}))
            //获取订餐状态信息
            this.statuList = Object.values(this.$store.state.dict["statu"]).map((item, index) => ({value: index + 1, title: item.text}))
        }
    }
</script>

<style>
  .mealTableHeader {
    color: rgba(64,158,255,0.7);
  }
</style>